<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实验室作业上传系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layuiadmin/style/template.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-header">
    <!-- 头部区域 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">学号：${stu.studentNo}</label>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名：${stu.name}</label>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">性别：${stu.gender}</label>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 150px;">手机号：${stu.moblephone}</label>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 150px;">邮箱：${stu.eMail}</label>
                    </div>
                    <div class="layui-inline" style="float:right">
                        <button class="layui-btn layui-btn-primary">
                            <a href="${basePath}/stu/index">返回列表</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--单选框-->
<br>
<br>

<form class="layui-form" lay-filter="example">
    <input type="hidden" id="urls" name="urls">
    <input type="hidden" id="id" name="id" value="${exam.id}">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-fluid layadmin-maillist-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layadmin-contact-box" >
                        <div class="layui-col-md12 layadmin-padding-left20 layui-col-sm6">
                            <a href="javascript:;"><h3 ><strong>类型：
                                <c:if test="${exam.type==1}">
                                    作业
                                </c:if>
                                <c:if test="${exam.type==2}">
                                    考试
                                </c:if>
                            </strong> </h3></a>
                            <hr>
                            <a href="javascript:;"><h3 ><strong>名称：${exam.name}</strong> </h3></a>
                            <div class="layadmin-address">
                                <a href="javascript:;">
                                    <hr>
                                    <strong>
                                        课程名称：${exam.remark2}
                                        <br>
                                        <hr>
                                        考试时间：${exam.startTime} - ${exam.endTime} &nbsp;&nbsp;&nbsp;共计：${time}分钟。剩余：<span id="sytime"></span>
                                        <br>
                                        <hr>
                                        实验室：${exam.interestName}
                                        <br>
                                        <hr>
                                        规则：${exam.desc}
                                    </strong>
                                    <br>     <br>
                                    <c:if test="${url!=null}">
                                        <a href="${url}" download>
                                            <button type="button" class="layui-btn" >下载</button>
                                        </a>
                                    </c:if>
                                    <button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>上传(只限压缩文件)</button>
                                    <br>
                                    <div class="layui-progress layui-progress-big" lay-filter="progressBar" lay-showPercent="yes">
                                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                    </div>
                                </a>
                           </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript" src="<%=request.getContextPath()%>/static/layui/layui.js"></script><!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'element','laydate', 'upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,element = layui.element
            ,$ = layui.jquery
            ,upload = layui.upload;

        //指定允许上传的文件类型
        upload.render({
            elem: '#test4'
            ,url:'<%=request.getContextPath()%>/stu/uploadWork?examId='+$("#id").val() //数据接口
            ,accept: 'file' //普通文件
            ,exts: 'zip|rar|7z'
            , xhr: 'xhrOnProgress'
            , progress: function (value) {//上传进度回调 value进度值
                console.log("进度：" + value + '%');
                element.progress('progressBar', value + '%')//设置页面进度条
             }
            ,done: function(res){
                if (res.code == 0) {
                    layer.msg("上传成功");
                   window.location.href='<%=request.getContextPath()%>/stu/index';
                } else {
                    layer.msg(res.msg)
                }
            }
        });
        start();
       function start(){
            var endTime = new Date('${exam.endTime}'); // 最终时间
           var miao=${miao};
           if(miao<=0){
               $('#test4').removeClass();
               $('#test4').attr("class","layui-btn layui-btn-disabled");
               $("#test4").attr('disabled', 'disabled');
           }
            setInterval(clock,1000); // 开启定时器
            function clock(){
                var nowTime = new Date(); // 一定是要获取最新的时间
                // console.log(nowTime.getTime()); 获得自己的毫秒
                var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
                if(second<0){
                    second=0;
                    //禁用按钮
                 $('#test4').removeClass();
                 $('#test4').attr("class","layui-btn layui-btn-disabled");
                 $("#test4").attr('disabled', 'disabled');
                }
                // 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
                // console.log(second);
                // 一小时 3600 秒
                // second / 3600 一共的小时数 /24 天数
                var d = parseInt(second / 3600 / 24); //天数
                //console.log(d);
                var h = parseInt((second-(d*3600*24)) / 3600 % 24) // 小时
                // console.log(h);
                var m = parseInt((second-(d*3600*24)-(h*3600)) / 60 );
                //console.log(m);
                var s = parseInt(second - (d*3600*24)-(h*3600) - (m*60)); // 当前的秒
                d<10 ? d="0"+d : d;
                h<10 ? h="0"+h : h;
                m<10 ? m="0"+m : m;
                s<10 ? s="0"+s : s;
                $('#sytime').html(d+"天 "+h+"小时 "+m+"分钟 "+s+"秒");
                //小于5分钟弹窗
                if(d==0 & h==0 & m==5 & s==0){
                    alert("还剩余5分钟，请尽快提交！")
                }
            }
        }
    });

</script>

</body>
</html>

